<template>
	<view style="min-height: 100vh;position: relative;background-color: #f2f2f2;">
		<u-navbar title='图片点检'  left-icon-color="white" :titleStyle="{'color':'white'}" bgColor="#13989a" :autoBack="true"  
			:placeholder="true"></u-navbar>
		<view class="container" >
			<u-subsection activeColor="#13989a" :list="list1" :current="current1"  @change="sectionChange1"></u-subsection>
			<view class="time"  v-if="current1==1" style="text-align: center;">
				{{timeTitle}}
			</view>  
			<view style="display: flex;flex-wrap: wrap;justify-content: space-between;padding: 0 20rpx;" v-if="pictureList.length>0"  >
				<view v-for="(v,i) in pictureList" @click="toPath(v.imgUrl)" :key="i" style=" padding: 20rpx 0;border-bottom: 1rpx solid #c8c8c8;margin: 0 10rpx; font-size: 28rpx;">
					<image :src="'http://'+v.imgUrl" mode="" style="height: 250rpx;width: 250rpx;"></image>
					<view class="flex" style="flex-direction: column;">
						<text>摄像头:{{v.serialNumber}}</text>
						<text>巡查:{{v.inspectionName}}</text>
						<text v-if="v.inspectionTime">时间:{{v.inspectionTime.split(' ')[0]}}</text>
					</view>
				</view>
			</view>
			<view v-else >
				<view style="width: 100%;height: 50vh;" >
					<u-empty
					        icon="https://renovationcdn.jiachuangnet.com/empty.jpg"
							width="100%"
							height="100%"
							text="数据为空"
					>
					</u-empty>
				</view>
			</view>
		</view>
		<u-datetime-picker ref="datetimePicker" cancelText=' ' :show="calendarShow2" v-model="time2" mode="date"
			@confirm="chooseTime2" @cancel="timeCancel" @close="timeClose"></u-datetime-picker>
		<u-datetime-picker :show="pickTimeShow" v-model="time1"  :formatter="formatter" mode="date" closeOnClickOverlay
			@confirm="timeConfirm" @cancel="timeCancel2" @close="timeClose2"></u-datetime-picker>
		<!-- <u-calendar :show="pickTimeShow" mode="range" @confirm="timeConfirm" @close="timeClose"></u-calendar> -->
		<u-popup :show="calendarDialog" @close="calendarDialogClose" mode="top">
			<view style="height: 400rpx;">
				<view class="timeConner">
					<view @click="pickTimeShow=true">{{time1?$u.timeFormat(time1, 'yyyy.mm.dd'):'开始时间'}}</view>
					<view>至</view>
					<view @click="calendarClick">{{time2?$u.timeFormat(time2, 'yyyy.mm.dd'):'结束时间'}}</view>
				</view>
				<view class="bottom flex" style="display: flex;justify-content: space-between; align-items: ;">
					<u-button size="small" style="width: 140rpx;" @click="calendarDialogClose">取消</u-button>
					<u-button size="small" type="primary" style="width: 140rpx;" color="#0da2a2"
						@click="change">确认</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
			data() {
				return {
					list1: ['全部','自定义'],
					current1: 0,
					templateName:'',
					shopNameShow:false,
					assignTaskId:0,
					calendarShow2:false,
					time2:null,
					pickTimeShow:false,
					time1:null,
					calendarDialog:false,
					pictureList:[],
					pageNumber:1,
				}
			},
			onLoad(option) {
				this.assignTaskId=option.assignTaskId
			},
			onShow() {
				this.pageNumber=1
				this.pictureList=[]
				this.getAllPictureList()
			},
			onReachBottom() {
				console.log('.1111')
				this.pageNumber++
				this.getAllPictureList()
			},
			computed:{
				// title(){
				// 	return this.list[this.current]+'问题·'+this.list1[this.current1]
				// },
				timeTitle(){
					let str=this.time1 ? this.$u.timeFormat(this.time1, 'yyyy-mm-dd'):''
					let str2=this.time2 ? this.$u.timeFormat(this.time2, 'yyyy-mm-dd'):''
					return str+' ~ '+str2
				}
			},
			methods:{
				calendarDialogClose() {
					this.calendarDialog = false
				},
				calendarClick() {
					if (this.time1) {
						this.calendarShow2 = true
					} else {
						uni.$u.toast('请选择开始时间!');
					}
				},
				getAllPictureList(){
					uni.$u.http.get('/inspectionTask/getAllPictureList', {
						params:{
							pageNum:this.pageNumber,
							pageSize:10,
							assignTaskId:this.assignTaskId,
							startTime:this.time1 ? this.$u.timeFormat(this.time1, 'yyyy-mm-dd'):null,
							endTime:this.time2 ? this.$u.timeFormat(this.time2, 'yyyy-mm-dd'):null,
						}
					}).then(res=>{
						if(res){
							this.pictureList=[...this.pictureList,...res.data]
						}
					})
				},
				sectionChange1(e){
					this.pictureList=[]
					this.pageNumber=1
					this.current1=e
					if(e==1){
						this.calendarDialog=true
					}else{
						this.time1=null
						this.time2=null
						this.getAllPictureList()
					}
				},
				toPath(imgUrl){
					uni.navigateTo({
						url: `/packageC/pages/pictureCheck/addPictureCheck?url=${imgUrl}`
					})
				},
				change() {
					if (!this.time1) {
						return uni.$u.toast('请选择开始时间!');
					}
					if (!this.time2) {
						return uni.$u.toast('请选择结束时间!');
					}
					this.calendarDialog = false
					this.pageNumber=1
					this.pictureLis=[]
					this.getAllPictureList()
				},
				timeConfirm(e) {
					this.pickTimeShow = false;
					this.time1 = e.value
				},
				chooseTime2(e) {
					this.calendarShow2 = false;
					this.time2 = e.value
				},
				timeCancel() {
					this.time1 = null
					this.pickTimeShow = false;
				},
				timeClose() {
					this.pickTimeShow = false;
				},
				timeCancel2() {
					this.time2 = null
					this.calendarShow2 = false;
				},
				timeClose2() {
					this.calendarShow2 = false;
				},
				formatter(type, value) {
					if (type === 'year') {
						return `${value}年`
					}
					if (type === 'month') {
						return `${value}月`
					}
					if (type === 'day') {
						return `${value}日`
					}
					return value
				},
			}
		}
</script>

<style lang="scss" scoped>
	.timeConner {
		display: flex;
		background: #0da2a2;
		height: 80rpx;
		border-radius: 50rpx;
		margin-left: 50rpx;
		margin-top: 150rpx;
		margin-right: 50rpx;
		justify-content: space-evenly;
		color: #fff;
		align-items: center;
		border: 10rpx solid #15a29d;
	}
	.bottom {
		display: flex;
		justify-content: center;
		margin-top: 30rpx;
		padding-left: 120rpx;
		padding-right: 120rpx;
	}
	.tag{
		margin-left: 10rpx;
		padding: 5rpx 10rpx;
		border-radius: 10rpx;
		background-color: #f9f9f9;
	}
	.shopName{
		padding-top: 150rpx;
		text-align: center;
		font-weight: 700;
		font-size: 30rpx;
		z-index: 1000;
		line-height: 100rpx;
	}
	.container {
		width: 92vw;
		padding: 30rpx;
		z-index: 10;
		position: absolute;
		top: 180rpx;
		overflow: hidden;
		border-radius: 20rpx;
	}
	.workerSearch {
		border-radius: 40rpx;
		display: flex;
		align-items: center;
		padding-left: 22rpx;
		width: 100%rpx;
		height: 60rpx;
		background-color: #e6e6e6;
		opacity: 0.9;
		margin: 10rpx 0;
	}
	.floor{
		background-color: #fff;
		border-radius: 10rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.title{
			font-weight: 600;
			font-size: 30rpx;
		}
	}
	.floor1{
		background-color: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		overflow: hidden;
		.title{
			font-weight: 600;
			font-size: 30rpx;
		}
	}
</style>